<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style='width:600px;height:400px'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js'></script>
  <script>
    var xDataArr = ['张三', '里斯', '王五']
    var yDataArr = [32, 39, 50]
    var mycharts = echarts.init(document.querySelector('div'))
    var option = {
      title: {
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 2,
        borderColor: 'blur',
        borderRadius: 5,
        left: 50,
        top: 10,
      },
      tooltip: {
        // trigger: 'axis',
        trigger: 'item',
        // 点击才会提示
        triggerOn: 'click',
        // formatter: '{b}的成绩是{c}'
        formatter(arg) {
          return `${arg.name}的分数是:${arg.data}`
        }
      },
      xAxis: {
        type: 'category',
        data: xDataArr,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '数学',
          type: 'bar',
          data: yDataArr,
          barWidth: '30%',
        }
      ],

    }
    mycharts.setOption(option)
  </script>
</body>

</html>